@charset "utf-8";

/* header */
.jrs-head {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 92px;
  display: flex;
  justify-content: space-between;
  padding: 0px 40px 0px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);

  z-index: 999;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 266px;
}

.logo .black_logo,
.logo .white_logo {
  display: none;
}

.head_right {
  display: flex;
  align-items: center;
}

.menu_r_line i {
  display: block;
  width: 36px;
  height: 36px;
  background-image: url(../images/white_menu.svg);
  background-repeat: no-repeat;
  cursor: pointer;
}

.head_right.active .menu_r_line i {
  background-image: url(../images/close.svg);
}

.language_box {
  position: relative;
  margin-right: 32px;
}

.header_language {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-top: 34px;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  pointer-events: none;
}

.header_language:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34px;
  opacity: 0;
  border-radius: 27px;
background-color: var(--red-color);
  z-index: 1;
  pointer-events: none;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.language_current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all .6s ease;
  position: relative;
  z-index: 2;
}

.language_current img:nth-child(2) {
  display: none;
}

.language_content {
  position: relative;
  z-index: 2;
  padding: 10px 0 10px 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.language_content .language_item_box {
  padding-bottom: 2px;
}

.language_content a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  font-family: Arial;
  text-transform: uppercase;
  display: block;
  text-align: center;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

/* .language_content a:hover {
  color: var(--main-color);
} */

/* .language_box:hover .language_current {
  background: var(--main-color);
} */

.language_box:hover .header_language {
  pointer-events: auto;
}

.language_box:hover .language_content {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.language_box:hover .header_language:after {
  height: 100%;
  opacity: 1;
}

.search_box {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 40px;
  padding-right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.search_bg {
  display: flex;
  width: 260px;
  height: 46px;
  padding: 6px 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(4px);
}

.search_bg .input {
  width: calc(100% - 24px);
  height: 24px;
  background-color: transparent;
  font-size: 16px;
  color: var(--white-color);
  outline: 0;
}

.search_bg .input::placeholder {
  color: rgba(255, 255, 255, 0.50);
}

.search_bg .submit {
  width: 24px;
  height: 24px;

  background-color: transparent;
  background-image: url(../images/search_wihte_icon.svg);
  background-repeat: no-repeat;
  cursor: pointer;
}

.head_n .jrs-head {
  position: relative;
}

/* menu */
.menu {
  float: left;
  padding-left: 82px;
}

.menu>ul>li {
  float: left;
  padding: 0 28px;
}

.menu>ul>li>a {
  display: flex;
  position: relative;
  padding: 32px 0;
  color: var(--white-color);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.menu>ul>li>a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #FFF;
  transition: width .4s;
}

.menu>ul>li.active>a::before {
  width: 100%;
}

.menu>ul>li .sub-menu {
  left: 0;
  position: absolute;
  top: 100%;
  display: flex;
  transition: all 0.4s ease-out;
  width: 100%;
  background-color: var(--white-color);
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  z-index: 9;
  transform-origin: top;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
}


.menu>ul>li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.sub-menu .max-width {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.sub-menu .menu_left {
  width: 63.4%;
  position: relative;
  padding: 48px 156px 30px 240px;
}

.sub-menu .menu_right {
  width: 36.6%;
  position: relative;

}

.sub-menu .menu_left .unicon {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
}

.sub-menu .menu_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub-menu .menu_right .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.30);
  display: flex;
  align-items: flex-end;
  padding: 40px;
  color: var(--white-color);
  font-weight: 400;
  line-height: 1.5;
}

.sub-menu .menu_left .big_t {
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--main-color);
  font-weight: 700;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}

.sub-menu .menu_left_list .ul {
  padding-top: 8px;
  margin-left: -40px;
  margin-right: -40px;
  overflow: hidden;
}

.sub-menu .menu_left_list .ul a {
  display: block;
  position: relative;
  padding-bottom: 16px;
  float: left;
  width: calc(33.33% - 80px);
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 40px;
  color: var(--dark-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  background-image: url(../images/menu_grey.svg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: right 0;
  transition: all 0.4s;
}

.sub-menu .menu_left_list .ul a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--main-color);
  transition: width .4s;
}

.sub-menu .menu_left_list .ul a:hover::before {
  width: 100%;
}

.sub-menu .menu_left_list .ul a:hover {
  color: var(--main-color);
  background-image: url(../images/menu_red.svg);
}

.sub-menu.pro-menu .first_name {
  padding-top: 20px;
  color: var(--dark-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.sub-menu.pro-menu .first_name:first-child {
  padding-top: 48px;
}

.sub-menu.pro-menu .ul {
  padding-top: 4px;
  margin-left: -20px;
  margin-right: -20px;
}

.sub-menu.pro-menu .ul a {
  margin-top: 20px;
  width: calc(25% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  background-position: right 4px;
}

@media screen and (max-width:1800px) {
  .menu>ul>li {
    padding: 0 20px;
  }
}

@media screen and (max-width:1680px) {
  .sub-menu .menu_left {
    padding: 48px 140px 30px 200px;
  }

  .menu {
    padding-left: 40px;
  }

  .search_bg {
    width: 240px;
    padding: 6px 16px;
  }

}

@media screen and (max-width:1580px) {
  .sub-menu .menu_left {
    padding: 48px 120px 30px 150px;
  }

  .search_bg {
    width: 220px;
    padding: 6px 14px;
  }

  .language_box {
    margin-right: 20px;
  }

  .search_box {
    margin-right: 20px;
    padding-right: 20px;
  }

  .menu>ul>li {
    padding: 0 18px;
  }


}

@media screen and (max-width:1579px) {
  .logo img {
    width: 240px;
  }

  .menu>ul>li {
    padding: 0 16px;
  }


}

@media screen and (max-width:1440px) {
  .sub-menu .menu_left {
    padding: 48px 80px 30px 150px;
  }
}

@media screen and (max-width:1439px) {
  .menu {
    display: none !important;
  }

}

@media screen and (max-width:1366px) {

  .sub-menu .menu_left {
    padding: 48px 60px 30px 100px;
  }
}

/* 滚屏 */

.jrs-head.on,
.jrs-head.headerColor2 {
  background-color: var(--white-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition:  background-color .8s;
}

.jrs-head.on .logo .red_logo,
.jrs-head.headerColor2 .logo .red_logo {
  display: none;
}

.jrs-head.on .logo .black_logo,
.jrs-head.headerColor2 .logo .black_logo {
  display: block;
}

.jrs-head.on .menu>ul>li>a,
.jrs-head.headerColor2 .menu>ul>li>a {
  color: var(--dark-color);
}

.jrs-head.on .menu>ul>li.active>a,
.jrs-head.headerColor2 .menu>ul>li.current>a {
  color: var(--main-color);
}

.jrs-head.on .menu>ul>li.active>a::before,
.jrs-head.headerColor2 .menu>ul>li.current>a::before {
  background: var(--main-color);
  width: 100%;
}


.jrs-head.on .menu_r_line i,
.jrs-head.headerColor2 .menu_r_line i {
  background-image: url(../images/blact_menu.svg);
}

.jrs-head.on .language_current img:first-child,
.jrs-head.headerColor2 .language_current img:first-child {
  display: none;
}

.jrs-head.on .language_current img:nth-child(2),
.jrs-head.headerColor2 .language_current img:nth-child(2) {
  display: block;
}
.jrs-head.on .header_language:after,
.jrs-head.headerColor2 .header_language:after{
  background: #E9E9E9;
}
.jrs-head.on .language_content a,
.jrs-head.headerColor2 .language_content a {
  color:#666;
}
.jrs-head.on .language_content a:hover,
.jrs-head.headerColor2 .language_content a:hover {
  color:var(--main-color);
}

.jrs-head.on .search_box,
.jrs-head.headerColor2 .search_box {
  border-right: 1px solid rgba(0, 0, 0, 0.10);
}

.jrs-head.on .search_bg,
.jrs-head.headerColor2 .search_bg {
  background: rgba(0, 0, 0, 0.05);
}

.jrs-head.on .search_bg .input,
.jrs-head.headerColor2 .search_bg .input {
  color: var(--dark-color);
}

.jrs-head.on .search_bg .input::placeholder,
.jrs-head.headerColor2 .search_bg .input::placeholder {
  color: rgba(255, 255, 255, 0.50);
}

.jrs-head.on .search_bg .submit,
.jrs-head.headerColor2 .search_bg .submit {
  background-image: url(../images/search_grey_icon.svg);
}

.jrs-head.on .search_bg .input::placeholder,
.jrs-head.headerColor2 .search_bg .input::placeholder {
  color: rgba(0, 0, 0, 0.20);
}



/* 弹出导航 */
body.hidden {
  overflow: hidden;
}

body.hidden .jrs-head {
  border-bottom-color: transparent;
  background-color: transparent;
}

body.hidden .jrs-head.on .logo .red_logo,
body.hidden .jrs-head.on .logo .black_logo {
  display: none;
}

body.hidden .jrs-head.on .menu_r_line i {
  background-image: url(../images/close.svg);
}

.logo.active .white_logo {
  display: block;
}

.logo.active .red_logo,
.logo.active .black_logo {
  display: none;
}

.menu.hide,
.language_box.hide,
.search_box.hide {
  display: none;
}


.pu_select {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--main-color);
  padding: 140px 0 0;
  -webkit-clip-path: ellipse(0 0 at 100% 0);
  clip-path: ellipse(0 0 at 100% 0);
  pointer-events: none;
  transition: clip-path 0.6s, -webkit-clip-path 0.6s;
}

.pu_select>div:first-child {
  max-width: 1600px;
  margin: 0 auto;

}

.pu_select>div>.pu_container {
  max-height: calc(100vh - 140px);
  overflow-y: auto;

  margin-left: 50px;
  margin-right: 50px;

  padding-right: 10px;
}

.pu_select>div>.pu_container::-webkit-scrollbar {
  width: 2px;
  height: 2px
}

.pu_select>div>.pu_container::-webkit-scrollbar-button:vertical {
  display: none
}

.pu_select>div>.pu_container::-webkit-scrollbar-corner,
.pu_select>div>.pu_container::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.20);
}

.pu_select>div>.pu_container::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.50);
}



.pu_select .ct_1 .slide {
  margin-right: 1.8rem;
}

.pu_select .ct_1 .slide:last-child {
  margin-right: 0;
}

.pu_select .ct_1 .slide .one a {
  color: #fff;
}

.pu_select .ct_1 .slide .one i {
  display: none;
}

.pu_select .ct_1 .slide .one i {
  width: 18px;
  height: 22px;
  float: right;
  background-image: url(../images/menu_icon_pressed_one.svg);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.pu_select .ct_1 .slide .one i.ico {
  background-image: url(../images/menu_icon_open_one.svg);
}

.pu_select .ct_1 .slide .two {
  display: flex;
  flex-flow: column;
}
.pu_select .ct_1 .slide .two a {
  display: inline-block;
  transition: 0.4s;
  color: rgba(255, 255, 255, 0.60);
  line-height: 32px;
  margin: 32px 0 0;
}

.pu_select .ct_1 .slide .two a:hover {
  color: #fff;
}

.pu_select .ct_2 {
  margin: 95px 0 0 0;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.50);
}

.pu_select .ct_2 .le_box {
  flex-wrap: wrap;
  flex: 1;
}

.pu_select .ct_2 .le_box .item {
  margin-right: 160px;
}

.pu_select .ct_2 .le_box .item:last-child {
  margin-right: 0;
}

.pu_select .ct_2 .le_box .item>div:first-child {
  color: rgba(255, 255, 255, 0.50);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.pu_select .ct_2 .le_box .item .svg {
  margin: 0 14px 0 0;
}

.pu_select .ct_2 .le_box .item .svg img {
  width: 24px;
}

.pu_select .ct_2 .le_box .item p {
  padding-left: 38px;
  padding-top: 10px;
  color: var(--white-color);
  font-family: 'Archivo';
  line-height: 40px;
  font-weight: 400;

}

.pu_select .ct_2 .le_box .item:first-child p {
  font-size: 28px;
  font-weight: 700;
}

.pu_select .ct_2 .le_box .item a {
  transition: 0.4s;
  color: var(--white-color);
}

.pu_select .ct_2 .ri_box img {
  width: 120px;
}

.pu_select .ct_2 .ri_box p {
  padding-top: 8px;
  color: var(--white-color);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.pu_select .head_copy {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
  color: rgba(255, 255, 255, 0.60);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.pu_select .head_copy a {
  color: rgba(255, 255, 255, 0.60);
  line-height: inherit;
}

.pu_select .head_copy a:hover {
  color: rgba(255, 255, 255, 0.9);
}


.pu_select.active {
  -webkit-clip-path: ellipse(142% 142% at 100% 0);
  clip-path: ellipse(142% 142% at 100% 0);
  pointer-events: auto;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@media screen and (max-height:880px) {
  .pu_select .ct_1 .slide .two a {

    margin: 20px 0 0;
  }

  .pu_select .ct_2 {
    margin: 60px 0 0 0;
    padding-top: 40px;
  }

}

@media screen and (max-height:800px) {
  .pu_select {
    padding: 120px 0 0;
  }

  .pu_select .ct_1 .slide .two a {
    margin: 16px 0 0;
  }

  .pu_select .ct_2 {
    margin: 40px 0 0 0;
    padding-top: 30px;
  }

}

@media screen and (max-width:1280px) {
  .pu_select .ct_1 .slide .two {
    font-size: 18px;
    line-height: 1.2;
  }

  .pu_select .ct_2 .ri_box {
    text-align: center;
  }

  .pu_select .ct_2 .ri_box img {
    width: 90px;
    margin: 0 auto;
  }

  .pu_select .ct_2 .ri_box p {
    font-size: 14px;
  }
}

@media screen and (max-width:991px) {
  .pu_select>div>.pu_container>div:first-child {
    flex-wrap: wrap;
  }

  .pu_select .ct_1 .slide {
    margin-right: 0;
    width: 100%;
    margin-bottom: 26px;
  }

  .pu_select .ct_2 {
    margin: 25px 0 0 0;
    padding-top: 40px;
  }

  .pu_select .ct_1 .slide .two {
    display: none;
    padding-top: 20px;
    width: 100%;
  }

  .pu_select .ct_1 .slide .two a {
    margin-right: 10px;
  }

  .pu_select .ct_1 .slide .one i {
    display: inline-block;
  }
}

@media screen and (max-width:767px) {
  .logo {
    width: 68%;
  }

  .jrs-head {
    height: 80px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .head_n .jrs-head {
    position: fixed;
  }

  .search_box {
    display: none;
    margin-right: 0;
    padding-right: 0;
  }
  .pu_select .search_box {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .search_bg {
    width: 100%;
  }
  .pu_select {
    padding: 100px 0 0;
  }

  .pu_select>div>.pu_container {
    max-height: calc(100vh - 100px);
    margin-left: 20px;
    margin-right: 20px;
  }

  .pu_select .ct_2 {
    flex-wrap: wrap;
  }

  .pu_select .ct_2 .le_box {
    width: 100%;
  }

  .pu_select .ct_2 .le_box .item {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
  }

  .pu_select .ct_2 .ri_box {
    width: 100%;
    display: none;
  }

  .pu_select .ct_2 .le_box .item p {
    line-height: 1.2;
    padding-top: 5px;
  }

  .pu_select .ct_2 .le_box .item:first-child p {
    font-size: 24px;
  }

  .pu_select .head_copy {
    display: block;
  }
}